<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style>
*{ margin:0; padding:0;}
html{ height:100%}
body{ background:url(images/body.png) center top; height:100%}
#mask{ height:100%; width:100%; position:absolute; top:0; left:0; background:#000; opacity:0.5; filter:alpha( opacity=50); display:none}
#searchTip{ width:980px; height:800px; position:absolute; left:50%; margin-left:-490px; display:none}
#searchTip div{ position:absolute; display:none}
#searchTip div a{ position:absolute; width:95px; height:32px; text-indent:-999px; overflow:hidden; cursor:pointer; }
#searchTip div span{ position:absolute; height:30px; width:30px;  text-indent:-999px; overflow:hidden; cursor:pointer; }

.stepA{ width:745px; height:329px; background:url(images/guide11.png); top:131px; left:-9px}
.stepA span{top:144px; left:683px}
.stepA a{top:231px; left:490px }

.stepB{ background:url(images/guide21.png); width:647px; height:405px;top:2px; left:324px}
.stepB a{top:308px; left:146px;}
.stepB span{ top:196px; right:285px; }

.stepC{ background:url(images/guide31.png); width:654px; height:257px;top:294px; left:318px}
.stepC a{top:155px; left:400px; }
.stepC span{ top:44px; right:35px; }

.stepD{ background:url(images/guide41.png); width:558px; height:348px;top:78px; left:155px}
.stepD a{top:246px; left:304px;}
.stepD span{ top:135px; right:35px; }

.stepE{ background:url(images/guide51.png); width:397px; height:342px;top:79px; left:250px}
.stepE a{top:245px; left:153px;}
</style>
<script>
window.onload=function(){
	var oMask=document.getElementById('mask');
	 var oSearch=document.getElementById('searchTip');
	 var aStep=oSearch.getElementsByTagName('div');
	 var aA=oSearch.getElementsByTagName('a');
	 var aClose=oSearch.getElementsByTagName('span');
	//读取cookie
	var res=document.cookie.substring(5);
	alert(res);
	
	//如果没有cookie，执行以下动作
	if(res!="www.open.com.cn"){
		alert(res)
		//mask  父框 第一单元显示出来
	oMask.style.display=oSearch.style.display=aStep[0].style.display='block';
	
	//下一步按钮
	for( var i=0; i<aStep.length; i++){
		aA[i].index=i; //为每一个按钮增加一个index属性，为后面引用的
		aA[i].onclick=function(){
			this.parentNode.style.display="none";
			if(this.index< aStep.length-1){
				aStep[this.index+1].style.display="block";
			}
			else if( this.index==aStep.length-1){
				oMask.style.display=oSearch.style.display="none";
			}
		}	
	}
	//关闭按钮
	for(var i=0; i<aClose.length;i++){
		aClose[i].onclick=function(){
			oMask.style.display=oSearch.style.display="none";
		}
	}
		//添加cookie
	var oDate=new Date();
	oDate.setDate(oDate.getDate()+30);
	document.cookie="name=www.open.com.cn;expires="+oDate;
	}

}

</script>
</head>

<body>
<div id="mask"></div>
<div id="searchTip">
	<div class="stepA"><a>下一步</a><span title="关闭">关闭</span></div>
    <div class="stepB"><a>下一步</a><span title="关闭">关闭</span></div>
    <div class="stepC"><a>下一步</a><span title="关闭">关闭</span></div>
    <div class="stepD"><a>下一步</a><span title="关闭">关闭</span></div>
    <div class="stepE"><a>下一步</a><span title="关闭">关闭</span></div>
</div>
</body>
</html>
